<template>
	<view class="indexBig">
		<view class="top">
			<u-icon name="arrow-left" size="36" @click="goToBack"></u-icon>
			<text>提现</text>
			<view class="" @click="goToPage('detail')">明细</view>
		</view>
		<view class="box">
			<view class="">可提现金额</view>
			<view class="">{{myInfo.walletBalance.toFixed(2)}}</view>
		</view>
		<view class="otherBox">
			<view class="moneyBox">
				<view :class="{'check':checkIndex==index}" @click="changeCheckIndex(index)"
					v-for="(item,index) in moneyList" :key="index">{{item}}元</view>
			</view>
			<view class="otherNum">
				<u-input placeholder="其他提现金额"></u-input>
			</view>
			<view class="toBox">
				<view class="tit">提现到</view>
				<view class="list">
			    <u-icon name="weixin-fill" size="56" color="#377D22" style="margin-right: 16rpx;"></u-icon>微信
				</view>
			</view>
		</view>
		<view class="button">立即提现</view>
	</view>
</template>

<script>
	import {getMyInfo} from '@/utils/req/api.js'
	export default {
		data() {
			return {
				checkIndex: 0,
				moneyList: [5, 10, 15],
				myInfo:{
					walletBalance:0
				}
			}
		},
		methods: {
			async getMyInfo(){
				let res=await getMyInfo();
				this.myInfo=res.data.result;
			},
			changeCheckIndex(index) {
				this.checkIndex = index;
			},
			goToPage(type) {
				let url;
				switch (type) {
					case "detail":
						url = './flowDetails';
						break;
				}
				uni.navigateTo({
					url
				})
			},
			goToBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexBig {
		min-height: 100vh;
		background: linear-gradient(0.45deg, #F5F5F5 6.52%, #FF8739 58.65%, #FB690F 98.93%);
		background-size: 100vw 466rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
		padding: 40rpx 20rpx;
		padding-bottom: 150rpx;

		.top {
			position: relative;
			height: 40rpx;
      text-align: center;
      .u-icon {
        position: absolute;
        left: 0;
      }

			>view {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 28rpx;
				line-height: 40rpx;
				color: rgba(255,255,255,.55);
			}
		}

		.box {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 40rpx 20rpx;
			height: 152rpx;
			line-height: 152rpx;
			@include flexs(space-between, center);
			font-weight: 500;
			font-size: 32rpx;

			>view:nth-child(2) {
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.otherBox {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 80rpx 20rpx;

			.moneyBox {
				@include flexs(space-between, center);

				>view {
					width: 30%;
					font-size: 32rpx;
					line-height: 2;
					padding: 15rpx 0;
					border-radius: 20rpx;
					text-align: center;
					border: 1px solid #e5e5e5;
					color: #666;
				}

				>.check {
					border: 1px solid #FA690A;
					color: #FA690A;
				}
			}

			.otherNum {
				margin: 40rpx 0;

				/deep/.u-input {
					border: 1px solid #e5e5e5;
					border-radius: 20rpx;
					font-size: 32rpx;
					line-height: 2;
					padding: 10rpx 20rpx !important;
				}
			}

			.toBox {
				margin: 40rpx 0;

				.tit {
					font-size: 32rpx;
					line-height: 2;
				}

				.list {
					@include flexs();
					padding: 20rpx;
					margin: 20rpx 0;
					border: 1px solid #e5e5e5;
					border-radius: 20rpx;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.button {
			position: fixed;
			left: 20rpx;
			bottom: 2vh;
			width: calc(100% - 40rpx);
			font-size: 36rpx;
			color: #fff;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 50rpx;
			text-align: center;
			background-color: #FA690A;
		}
	}
</style>
